<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
         /*	伪类选择器 	*/
         div{
         	width: 200px;
         	height: 200px;
         	background: green;
         }
         /* 鼠标悬停在p身上时， p会发生哪些改变      */
         div:hover{
         	width: 300px;
         	background: skyblue;
         }
         p:hover{
             /*  下划线       	*/
         	text-decoration: underline;
         	color: blue;
         }
          /* 鼠标悬停在box身上时，box里面的span发生样式改变 父子关系  */
         .box:hover span{
                background: hotpink;
                color:gold;
         }

         ul li:hover a{
             /*  去掉下划线       	*/
         	text-decoration: none;
         	color: orange;
         }
      /*   伪元素选择器 :
                  在h1内部的最前面添加一个 伪 元素
                  要添加的伪元素，不存在于dom树（html里），是新创建的虚拟元素
                  是h1的子元素，逻辑上存在，实际上不存在
                  因为它不存在于dom树，所以不能通过js操作，仅仅只是css中引入的
                  
        */
           h1::before{
          /*  必须结合content去使用   */
            /* 宽高加不上  行内元素   */
           	   content: "迪丽热巴";
           	   width: 200px;
           	   height: 200px;
           	   background: green;
          /*   如果想宽高生效，转换为块状元素  */
               display: block;
           }
           h1::after{
           	   content: "阿尔卑斯";
           	   width: 200px;
           	   height: 200px;
           	   background: darkred;
           }
	</style>
</head>
<body>
        <div></div>
        <p>打工人冒雪上班的一天</p>
        <div class="box">
        	<span>梁子璇小笨蛋</span>
        </div>
        <ul>
        	<li>
        		<a href="">百度一下</a>
        	</li>
        </ul>
        <h1>伪元素</h1>
</body>
</html>